<template>
  <view class="box">
	<view class="biaoti">
		<view class="">
			<span class="biaoti_sx">
				<i class="iconfont icon-saoma1" style="font-size: 38rpx;"></i>
				<text style="font-size: 16rpx;">扫码</text>
			</span>
		</view>
		<view style="margin-top: 10rpx;">
			<text style="font-size: 36rpx;font-weight: 500;">个人中心</text>
		</view>
		<view class="right_zy">
			<span class="right_sx">
				<i class="iconfont icon-31fenxiang" style="font-size: 38rpx;"></i>
				<text style="font-size: 16rpx;">分享</text>
			</span>
			<span class="right_sx" style="margin-left: 20rpx;">
				<i class="iconfont icon-xiaoxi-zhihui" style="font-size: 38rpx;"></i>
				<text style="font-size: 16rpx;">消息</text>
			</span>
		</view>
	</view>
	
	<view class="header">
		<view class="box-header">
			<image src="../../static/header/lufei.jpg" 
			class="header-img" 
			></image>
			<view class="member">
				<view><text>香蕉不辣</text></view>
				<view><text>ID:18088658582</text></view>
			</view>
			<view class="login">
				<text @click="gotoPage()" class="header-text"> 登录 / 注册 </text>	
			</view>
		</view>
		<view class="jianjie">
			<text>
				人生得一知己足矣，斯世当以同怀视之 - 鲁迅
			</text>
		</view>
	</view>
	
	<view class="shoucang">
		<view>
			<view class="type-class">
				<text>2000</text>
				<text>关注</text>
			</view>
		</view>
		<view class="shuxian"></view>
		<view>
			<view class="type-class">
				<text>20</text>
				<text>收藏</text>
			</view>
		</view>
		<view class="shuxian"></view>
		<view>
			<view class="type-class">
				<text>122</text>
				<text>粉丝</text>
			</view>
		</view>
		<view class="shuxian"></view>
		<view>
			<view class="type-class">
				<text>122</text>
				<text>点赞</text>
			</view>
		</view>
	</view>	
	
	<view class="order_list">
		<view class="item">
			<i class="iconfont icon-pengyouquan1" style="font-size: 45rpx;"></i>
			<text>个人资料</text>
			<i class="iconfont icon-youjiantou9" style="font-size: 35rpx;color: #c3c3c3;"></i>
		</view>
		<view class="item">
			<i class="iconfont icon-pengyouquan1" style="font-size: 45rpx;"></i>
			<text>我的订阅</text>
			<i class="iconfont icon-youjiantou9" style="font-size: 35rpx;color: #c3c3c3;"></i>
		</view>
		<view class="item">
			<i class="iconfont icon-pengyouquan1" style="font-size: 45rpx;"></i>
			<text>我的足迹</text>
			<i class="iconfont icon-youjiantou9" style="font-size: 35rpx;color: #c3c3c3;"></i>
		</view>
		<view class="item">
			<i class="iconfont icon-pengyouquan1" style="font-size: 45rpx;"></i>
			<text>意见反馈</text>
			<i class="iconfont icon-youjiantou9" style="font-size: 35rpx;color: #c3c3c3;"></i>
		</view>
		<view class="item">
			<i class="iconfont icon-bangzhuzhongxin" style="font-size: 45rpx;"></i>
			<text>帮助中心</text>
			<i class="iconfont icon-youjiantou9" style="font-size: 35rpx;color: #c3c3c3;"></i>
		</view>
		<view class="item">
			<i class="iconfont icon-pengyouquan1" style="font-size: 45rpx;"></i>
			<text>安全中心</text>
			<i class="iconfont icon-youjiantou9" style="font-size: 35rpx;color: #c3c3c3;"></i>
		</view>
	</view>
	

	
  </view>
</template>

<script>
    export default {
        data() {
            return {
                captchaBase64: '',
				captchaKey:'',
				captchaCode:'',
				username:'',
				password:'',
            }
        },
        onLoad() {
			// this.captcha();
        },
        methods: {
            gotoPage() {
				uni.navigateTo({
					url: '/pages/login/login',
				})
            }
        }
    }
</script>

<style>
@import "@/static/iconfont/iconfont.css";

.shuxian{
	border-right: solid 1rpx #ddd;
}

.item{
	background-color: #ffffff;
	border-bottom: solid 1rpx #f1f1f1;
	padding: 10rpx;
	display: grid;
	grid-template-columns: 50rpx 1fr 35rpx;
}

.item text{
	color: #6E6E6E;
	font-size: 30rpx;
}

.order_list{
	/* margin: 10rpx; */
	margin-top: 10rpx;
}

page{
	background-color: #f4f4f4;
	height:100vh;
}

.right_zy{
	display: flex;
	justify-content: space-evenly;
}

.biaoti_sx{
	display: flex;
	flex-direction: column;
	place-content: center center;
}

.right_sx{
	display: grid;
	grid-template-columns: repeat(1,1fr);
	place-content: center center;
}

.header{
	border-top: solid 1rpx #f1f1f1;
	border-bottom: solid 1rpx #f1f1f1;
	padding: 10rpx 0;
	background-color: #ffffff;
}

.biaoti{
	/* display: grid; */
	/* grid-template-columns: repeat(3,1fr); */
	display: flex;
	justify-content: space-between;
	padding: 15rpx 30rpx;
	background-color: #ffffff;
}

.jianjie text{
	font-size: 30rpx;
	color: #6E6E6E;
	margin-left: 60rpx;
}

.bianjiziliao{
	margin-left: 30rpx;
	background-color: #f6d365;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 50rpx;
	margin-top: 20rpx;
	font-size: 30rpx;
	color: #6E6E6E;
	padding: 10rpx;
}

.type-class{
	display: flex;
	flex-direction: column;
	place-content: center center;
}

.type-class text:first-child{
	font-size: 30rpx;
	font-weight: bold;
}

.type-class text:last-child{
	font-size: 30rpx;
	line-height: 30rpx;
	/* border-radius: 30px; */
	/* background-color: #f6d365; */
	/* font-weight: bold; */
	padding: 10rpx;
}

.calssfy{
	margin-top: 20rpx;
	height: 200rpx;
	border: solid 2rpx #f6d365;
}

.box{
	/* padding-top: 20rpx; */
	/* padding-bottom: 20rpx; */
}

.xiugai{
	margin-left: 20rpx;
}

.shoucang{
	display: flex;
	justify-content: space-evenly;
	background-color: #ffffff;
	height: 80rpx;
	padding: 20rpx 0;
	/* margin-top: 20rpx; */
}

.shoucang text{
	font-size: 30rpx;
	color: #6E6E6E;
	text-align: center;
}

.member{
	margin-top: 30rpx;
	margin-left: 10rpx;
}

.member text{
	font-size: 25rpx;
	color: #6E6E6E;
} 

.login{
	margin-top: 10rpx;
	background-color: #f6d365;
	height: 60rpx;
	width: 180rpx;
	border-radius: 60rpx;
	line-height: 60rpx;
	width: 100%;
	text-align: center;
}

.login text{
	font-size: 25rpx;
	color: #6E6E6E;
}
 
.box-header {
	height: 160rpx;
	padding: 10rpx 30rpx;
	display: grid;
	grid-template-columns: 180rpx auto 160rpx;
}

.header-img{
	width: 120rpx;
	height: 120rpx;
	border: solid 2rpx blueviolet;
	border-radius: 120rpx;
	margin-top: 20rpx;
	margin-left: 20rpx;
}

.header-text{
	padding-top: 50rpx;
	color: #6E6E6E;
}

</style>



